<template>
	<a-row :gutter="[10, 10]">
		<a-col :span="4">
			<a-card :bordered="false" class="h-[232px]">
				<a-statistic title="会议室总数量" :value="113" style="margin-right: 50px" />
			</a-card>
		</a-col>
		<a-col :span="20">
			<a-card :bordered="false">
				<a-statistic title="南区会议室数量" :value="83" style="margin-right: 50px" />
			</a-card>
			<a-card :bordered="false" class="mt-[10px]">
				<a-statistic title="北区会议室数量" :value="3" style="margin-right: 50px" />
			</a-card>
		</a-col>
	</a-row>
	<a-row class="my-[20px]">
		<a-range-picker v-model:value="value1" />
	</a-row>
	<a-row class="h-[400px]">
		<a-col :span="12">
			<chart :option="option1"></chart>
		</a-col>
		<a-col :span="12">
			<chart :option="option2"></chart>
		</a-col>
	</a-row>
</template>
<script setup>
	import chart from './chart.vue'
	import { ref } from 'vue'
	const option1 = ref({
		title: '南校区',
		xAxis: ['教室1', '教室2', '教室3', '教室4', '教室5', '教室6', '教室7', '教室8'],
		value: [12, 3, 45, 4, 3, 23, 23, 12, 4]
	})
	const option2 = ref({
		title: '北校区',
		xAxis: ['教室1', '教室2', '教室3', '教室4', '教室5', '教室6', '教室7', '教室8'],
		value: [12, 3, 45, 4, 3, 23, 23, 12, 23]
	})
	const value1 = ref(null)
</script>
